<template>
	<view>
		<view class="ml56 mr48">
			<view-navbar></view-navbar>

			<view class="content">
				<!--  -->
				<!-- 1 -->
				<view class="margin ">
					<view class="flex-start flex-align  pd10" style=" margin-bottom: 16rpx;">
						<view class="mr42"><u-icon name="arrow-left" color="" size="25" @click="back" style=""></u-icon></view>
						<view class="createCircle">创建圈子</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="mt70"><u--input placeholder="群组名称" border="bottom" clearable></u--input></view>
				<!-- 3 -->
				<view class="flex-align mt34">
					<view class="mr18">圈子成员</view>
					<view class="mr242"><image src="/static/img/createCc/Container.png" mode="" style="width: 96rpx;height: 96rpx;"></image></view>
					<view class="mr12 number">3/500</view>
					<view class="row flex-cen"><image src="/static/img/createCc/153.png" mode="" style="width: 31rpx;height: 31rpx;"></image></view>
				</view>
				<!-- 4 -->
				<view class="mt40">
					<view class="flex-align">
						<view class="tag mr10">标签</view>
						<view class="small mt22">家庭群无法公开</view>
					</view>
				</view>
				<!-- 5 -->
				<view class="mt24">
					<view class="flex">
						<view class="mr20">
							<view class="family flex-cen">
								<view class="mr10"><image src="/static/img/createCc/154.png" mode="" style="width: 15rpx;height: 24rpx;"></image></view>
								<view class="word">家庭</view>
							</view>
						</view>
						<view class="row1 flex-cen"><image src="/static/img/createCc/153.png" mode="" style="width: 22rpx;height: 22rpx;"></image></view>
					</view>
				</view>
				<!-- 6 -->
				<view class="">
					<view class="">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="4">
								<view class="demo-layout bg-purple-light"><view class="">说点什么：</view></view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple"><u--input placeholder="请输入内容" border="bottom" clearable></u--input></view>
							</u-col>
						</u-row>
					</view>
				</view>
				<!-- 7 -->
				<view class="">
					<view class=""><view class="">圈主权限</view></view>
				</view>
				<!-- 8 -->
				<view class="mt20">
					<view class="">
						<view class="">
							<view class="u-demo-block">
								<view class="u-demo-block__content">
									<view class="u-page__checkbox-item">
										<u-checkbox-group
											v-model="checkboxValue2"
											placement="column"
											@change="checkboxChange"
											shape="square"
											inactiveColor="#7976E9"
											activeColor="#7976E9"
										>
											<u-checkbox
												:customStyle="{ marginBottom: '8px' }"
												v-for="(item, index) in checkboxList2"
												:key="index"
												:label="item.name"
												:name="item.name"
											></u-checkbox>
										</u-checkbox-group>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 9 -->
				<view class="mt38">
					<view class=""><view class="">圈子属性</view></view>
				</view>
				<!-- 10 -->
				<view class="mt22">
					<view class="">
						<view class="">
							<u-checkbox-group v-model="checked" placement="row">
								<u-checkbox activeColor="#7976E9" label="公开"></u-checkbox>
								<view class="mr66"></view>
								<u-checkbox activeColor="#7976E9" label="不公开"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</view>
				<!-- 11 -->
				<view class="">
					<u-gap height="11" bgColor="#fff"></u-gap>
					<view class="">
						<view class="flex-align">
							<view class="tag mr10">圈子人数</view>
							<view class="small mt22">人数最高500人</view>
						</view>
					</view>
				</view>
				<!-- 12 -->
				<view class="">
					<u-gap height="7" bgColor="#fff"></u-gap>
					<view class="flex">
						<view class="mr18 row2" v-for="item in 3" :key="item"><view class="word flex-cen">10人</view></view>
						<view class="row2"><view class="word flex-cen">自定义</view></view>
					</view>
				</view>
				<!-- 13 -->
				<view class="">
					<u-gap height="26" bgColor="#fff"></u-gap>
					<view class="">圈子码</view>
				</view>
				<!-- 14 -->
				<view class="">
					<view class="">
						<view class="">
							<u-input placeholder="AWX 05F" border="bottom" clearable placeholderStyle="color: red;">
								<template slot="suffix">
									<view class="suffixStyle">
										<view class="flex-cen">
											<view
												class=""
												style="


font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;

-webkit-background-clip: text;
"
											>
												生成
											</view>
										</view>
									</view>
								</template>
							</u-input>
						</view>
					</view>
				</view>
				<!-- 15 -->
				<u-gap height="26" bgColor="#fff"></u-gap>
				<view class="flex-cen">
					<view class="" style="">
						<view
							class="flex-cen"
							style="width: 582rpx;
height: 94rpx;
background: #7976E9;
border-radius: 56rpx 56rpx 56rpx 56rpx;
opacity: 1;"
						>
							<view class="">
								<view
									class=""
									style="


font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;

-webkit-background-clip: text;
"
								>
									创建群组
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 16 -->
				<u-gap height="20" bgColor="#fff"></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checkboxValue2: '',
			checked: true,
			checkboxList2: [
				{
					name: '仅邀请',
					disabled: false
				},
				{
					name: '可邀请、加入',
					disabled: false
				},
				{
					name: '加入时需要圈主验证',
					disabled: false
				},
				{
					name: '加入时无需验证',
					disabled: false
				},
				{
					name: '直系亲属加入无需验证，仅限直系亲属',
					disabled: false
				}
			]
		};
	},
	methods: {
		checkboxChange() {},
		back() {
			/*uni.navigateBack({
					delta: 1
				})*/
			//@zxyuns 处理兼容，如果没有上一级界面则返回首页
			const pages = getCurrentPages();
			if (pages.length === 2) {
				uni.navigateBack({
					delta: 1
				});
			} else if (pages.length === 1) {
				uni.switchTab({
					url: '/pages/home/home'
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.suffixStyle {
	width: 126rpx;
	height: 46rpx;
	background: #7976e9;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;
}

.inputStyle {
	// width: 138rpx;
	// height: 44rpx;
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ff0000;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.createCircle {
	// width: 192rpx;
	// height: 66rpx;
	font-size: 48rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #1b1b1b;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.row {
	width: 80rpx;
	height: 80rpx;
	background: #7976e9;
	opacity: 1;
	border-radius: 50%;
}

.number {
	// width: 70rpx;
	// height: 34rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #aaaaaa;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.tag {
	// width: 64rpx;
	// height: 44rpx;
	font-size: 32rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	// font-weight: bold;
	// color: #000000;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.small {
	// width: 112rpx;
	// height: 22rpx;
	font-size: 16rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ff7676;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.family {
	width: 126rpx;
	height: 46rpx;
	background: #7976e9;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;

	.word {
		// width: 64rpx;
		// height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ffffff;
		// line-height: 0rpx;
		-webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}
}

.row1 {
	width: 80rpx;
	height: 46rpx;
	background: #7976e9;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;
}

.row2 {
	width: 126rpx;
	height: 44rpx;
	background: #7976e9;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;

	.word {
		// width: 96rpx;
		// height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ffffff;
		// line-height: 0rpx;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}
}
</style>
